<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<form name="apiProxyCtrl.formApi" ng-submit="apiProxyCtrl.update(apiProxyCtrl.api)" novalidate>
  <div class="gv-forms" layout="column">
    <h1>CORS</h1>
    <div class="gv-form">
      <div class="gv-forms-header">
        <h2>Cross-origin resource sharing</h2>
        <div ng-switch on="apiProxyCtrl.api.proxy.cors.enabled">
          <span class="proxy-activated" ng-switch-when="true">(active)</span>
          <span class="proxy-deactivated" ng-switch-when="false">(not active)</span>
          <span class="proxy-deactivated" ng-switch-default>(not active)</span>
        </div>
      </div>
      <div class="gv-form-content">
        <md-checkbox ng-model="apiProxyCtrl.api.proxy.cors.enabled" aria-label="Enable CORS" flex
          >Enabled
          <div class="ipsum">
            CORS is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the
            domain from which the first resource was served.<br />
            If you enable the <i>try-it</i> feature of a Swagger page you probably have to enable and configure the CORS.
          </div>
        </md-checkbox>
        <div layout="column" layout-wrap layout-gt-sm="row">
          <div flex-xs flex="50" style="margin-top: 20px">
            <div class="md-label" ng-class="{disabled: !apiProxyCtrl.api.proxy.cors.enabled}">Access-Control-Allow-Origin *</div>
            <md-chips
              ng-model="apiProxyCtrl.api.proxy.cors.allowOrigin"
              ng-required="apiProxyCtrl.api.proxy.cors.enabled"
              md-removable="apiProxyCtrl.api.proxy.cors.enabled"
              placeholder="*, https://mydomain.com, (http|https).*.mydomain.com, ..."
              md-on-add="apiProxyCtrl.controlAllowOrigin($chip, $index)"
              md-add-on-blur="true"
              readonly="!apiProxyCtrl.api.proxy.cors.enabled"
            >
              <md-chip-template>
                <strong>{{$chip}}</strong>
              </md-chip-template>
            </md-chips>
            <div class="hint">
              The origin parameter specifies a URI that may access the resource. Scheme, domain and port are part of the
              <i>same-origin</i> definition.<br />
              If you choose to enable '*' it means that is allows all requests, regardless of origin. Regular Expressions are also
              supported.
            </div>
            <div ng-if="!apiProxyCtrl.isRegexValid()" style="color: red">Regex is invalid</div>
          </div>

          <div flex-xs flex="50">
            <md-input-container class="md-block" flex-gt-sm>
              <label>Access-Control-Allow-Methods</label>
              <md-select
                ng-model="apiProxyCtrl.api.proxy.cors.allowMethods"
                md-on-close="clearSearchTerm()"
                data-md-container-class="selectdemoSelectHeader"
                multiple
                ng-required="apiProxyCtrl.api.proxy.cors.enabled"
                ng-disabled="!apiProxyCtrl.api.proxy.cors.enabled"
              >
                <md-select-header class="demo-select-header">
                  <input
                    ng-model="searchTerm"
                    type="search"
                    placeholder="Search for allowed HTTP method."
                    class="demo-header-searchbox md-text"
                  />
                </md-select-header>
                <md-optgroup label="HTTPMethods">
                  <md-option
                    ng-value="method"
                    ng-repeat="method in methods |
              filter:searchTerm"
                    >{{method}}</md-option
                  >
                </md-optgroup>
              </md-select>
              <div class="hint">
                Specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request.
              </div>
            </md-input-container>
          </div>

          <div flex-xs flex="50" style="margin: 20px 0">
            <div class="md-label" ng-class="{disabled: !apiProxyCtrl.api.proxy.cors.enabled}">Access-Control-Allow-Headers</div>
            <md-chips
              ng-model="apiProxyCtrl.api.proxy.cors.allowHeaders"
              md-autocomplete-snap
              md-add-on-blur="true"
              md-require-match="false"
              readonly="!apiProxyCtrl.api.proxy.cors.enabled"
            >
              <md-autocomplete
                md-search-text="searchHeaders"
                md-items="item in apiProxyCtrl.querySearchHeaders(searchHeaders)"
                md-item-text="item"
                placeholder="Content-Type, ..."
              >
                <span md-highlight-text="searchHeaders">{{item}}</span>
              </md-autocomplete>
              <md-chip-template>
                <span>
                  <strong>{{$chip}}</strong>
                </span>
              </md-chip-template>
              <span class="ipsum">
                Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.
              </span>
            </md-chips>
          </div>

          <div layout-gt-sm="row">
            <md-input-container class="md-block" flex-gt-sm>
              <md-checkbox
                ng-model="apiProxyCtrl.api.proxy.cors.allowCredentials"
                ng-disabled="!apiProxyCtrl.api.proxy.cors.enabled"
                aria-label="Access-Control-Allow-Credentials"
                class="md-align-top-left"
                flex
              >
                Access-Control-Allow-Credentials<br />
                <span class="ipsum">
                  Indicates whether or not the response to the request can be exposed when the credentials flag is true.
                </span>
              </md-checkbox>
            </md-input-container>

            <md-input-container class="md-block" flex-gt-sm>
              <label>Max Age (seconds)</label>
              <input
                ng-model="apiProxyCtrl.api.proxy.cors.maxAge"
                type="number"
                ng-required="apiProxyCtrl.api.proxy.cors.enabled"
                min="-1"
                ng-disabled="!apiProxyCtrl.api.proxy.cors.enabled"
              />
              <div class="hint">This header indicates how long the results of a preflight request can be cached (-1 if disabled).</div>
            </md-input-container>
          </div>

          <div flex-xs flex="50">
            <div class="md-label" ng-class="{disabled: !apiProxyCtrl.api.proxy.cors.enabled}">Access-Control-Expose-Headers</div>
            <md-chips
              ng-model="apiProxyCtrl.api.proxy.cors.exposeHeaders"
              md-autocomplete-snap
              md-add-on-blur="true"
              md-require-match="false"
              readonly="!apiProxyCtrl.api.proxy.cors.enabled"
            >
              <md-autocomplete
                md-search-text="searchHeaders"
                md-items="item in apiProxyCtrl.querySearchHeaders(searchHeaders)"
                md-item-text="item"
                placeholder="Cache-Control, Content-Length, Content-Type, ..."
              >
                <span md-highlight-text="searchHeaders">{{item}}</span>
              </md-autocomplete>
              <md-chip-template>
                <span>
                  <strong>{{$chip}}</strong>
                </span>
              </md-chip-template>
            </md-chips>
            <div class="hint">This header lets a server whitelist headers that browsers are allowed to access.</div>
          </div>
        </div>
        <br />

        <md-checkbox
          ng-model="apiProxyCtrl.api.proxy.cors.runPolicies"
          ng-disabled="!apiProxyCtrl.api.proxy.cors.enabled"
          aria-label="Run policies on preflight-request"
          flex
          >Run policies for preflight requests
          <div class="ipsum">By default, preflight-requests are ending when processed by the gateway without running API policies.</div>
        </md-checkbox>

        <div class="md-actions gravitee-api-save-button" layout="row">
          <md-button
            permission
            permission-only="'api-definition-u'"
            class="md-raised md-primary"
            type="submit"
            ng-disabled="!apiProxyCtrl.isRegexValid() || apiProxyCtrl.formApi.$invalid || apiProxyCtrl.formApi.$pristine"
          >
            Save
          </md-button>
          <md-button
            permission
            permission-only="'api-definition-u'"
            class="md-raised"
            type="button"
            ng-click="apiProxyCtrl.reset()"
            ng-disabled="apiProxyCtrl.formApi.$pristine"
          >
            Reset
          </md-button>
        </div>
      </div>
    </div>
  </div>
</form>
